<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding:0px;
				margin:0px;
			}
			#header1{
				height:100px;
				background:url(1.jpg) ;
				position:fixed;
				top:0px;
				left:0px;
				width:100%;
				
				z-index: 2;
			}
			#add{
				
				width:100%;
			}
			
			.biji{
				
				margin:10px;
				padding:4px;
				border-radius:3px;
				padding-top:15px;
				border:2px solid black;
				position:relative;
				top:100px;
				
			}
			.delete{
				position:absolute;
				top:3px;
				right:10px;
				font-size:12px;
			}
			
			.time{
				
				font-size:12px;
				color:gray;
				
			}
			#bijiList{
				background-color:rgb(216,206,155);
				
				padding-bottom:150px;
			}
			#bottom1{
				width:100%;
				height:300px;
				background:url(bottom.jpg) no-repeat ;
				background-size:120%;
				position:fixed;
				bottom:-250px;
				left:0px;
			}
			#bw1{
				padding:5px;
				padding-bottom:10px;
			}
			#add{
				height:10px;
				}
			.but{
				width:60px;
				line-height: :38px;
				border-radius:5px;
				font-size:16px;
				background-color:rgb(216,206,155);
				text-shadow:1px 2px 1px rgb(216,206,155);
				
			}
			
		</style>
	</head>
	<body>
		
		<div id="d1" >
			<div id="header1">
			<button id="bakbtn" class="but">备份</button>
			<button id="impbtn"class="but">导入</button>
			<h2 id="bw1">备忘录</h2>
			<hr />
			<span id="add" style="font-size:27px">+</span>	
			</div>
			<div id="bijiList"></div>
			<div id="bottom1"></div>
		</div>
		
		<div id="d2"  style="display:none ">
			<h2 id="returnBut" >返回备忘录</h2>
			<hr />
			<div id="cntDiv" contentEditable style="padding:5px;height:300px;overflow:auto"></div>
		</div>
		<script>
			var bijis=[];
			function loadData(){
				if(localStorage.bijis){
					bijis=JSON.parse(localStorage.bijis);
				}
				 bijiList.innerHTML="";
				for(var i=bijis.length-1;i>=0;i--){
					var b=bijis[i];
					var newconDiv =document.createElement("div");
					newconDiv.className="biji";
					
					var delSpan =document.createElement("span");
					   delSpan.innerHTML="删除";
					    delSpan.className="delete";
					var titDiv=document.createElement("div");
					    titDiv.innerHTML=b.content;
					   titDiv.className="title";
					var datDiv=document.createElement("div");
					    datDiv.className="time";
						datDiv.innerHTML=b.date;
					newconDiv.appendChild(delSpan);
					newconDiv.appendChild(titDiv);
					newconDiv.appendChild(datDiv);
					bijiList.appendChild(newconDiv);
				}
			}
			impbtn.onclick = function(){
			  var uploadInput = document.createElement("input");
			  document.body.appendChild(uploadInput);
			  uploadInput.type = "file";
			  uploadInput.style.display = "none";
			  uploadInput.click();
			  uploadInput.onchange = function(){
			    var f = uploadInput.files[0];
			    var filereader = new FileReader();
			    filereader.readAsText(f);
			    shaohou.style.display = "block";
			    
			
			    filereader.onload = function(){
			
			setTimeout(function(){
			      shaohou.style.display = "none";
			      var bijis = JSON.parse(filereader.result);
			      localStorage.bijis = filereader.result;
			      loadData();
			 },3000);
			
			    };
			
			   
			  }
			};
			
			bakbtn.onclick = function(){
			  var blob = new Blob([JSON.stringify(bijis)],{"type":"application/json"});
			  var url = URL.createObjectURL(blob);
			  console.log(url);
			  var aEle = document.createElement("a");
			  aEle.download = "备份.biji";
			  aEle.href = url;
			  document.body.appendChild(aEle);
			  aEle.click();
			  document.body.removeChild(aEle);
			};
			
			loadData();
			add.onclick=function(){
				d1.style.display="none";
				d2.style.display="block";
				cntDiv.focus();
				
			}
			returnBut.onclick=function(){
				d1.style.display="block";
				d2.style.display="none";
				if(cntDiv.innerHTML.length>0){
					var biji={
						content:cntDiv.innerHTML,
					    date:(new Date()).toLocaleString(),
					         };
					bijis.push(biji);
					localStorage.bijis=JSON.stringify(bijis);
					loadData();
					cntDiv.innerHTML="";
				}
				
			}
			
		</script>
		
	</body>
</html>
